<template>
  <div @click="btn">
    <!-- style="position: relative;bottom: 9px;" -->
    <svg-icon
      class-name="customer-icon"
      icon-class="customer-service"
      slot="reference"

    ></svg-icon>
    <el-badge v-if="value!=0" id="badge" :value="value" class="item"></el-badge>
  </div>
</template>
<script>
import { getUnreadCount } from "@/api/customer/customerService";
export default {
  data() {
    return {
      value: "",
      socket: "",
      number: 0,
      size: 0,
      ID: "",
      path: "ws://www.wendudu.com/chat", //发送地址
      intervalId: null,
      token: this.$store.state.user.token, //发送的后台token
    };
  },
  created() {
    this.init()
    //this.dataRefreh();
    this.getUnreadCountData()
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;

    this.clear();
  },
  methods: {
    // 定时刷新数据函数
   /* dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.sdel();
      }, 15000);
    },*/
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    getUnreadCountData(){
      getUnreadCount().then((response) => {
            this.value = response.data
        });
    },
    sdel() {
      if (this.token != "") {
        if (this.socket.readyState === this.socket.CLOSED) {
          this.$message.error("服务器断开连接！请刷新页面重试");
        } else {
          this.getUnreadCountData()
          this.socket.send(
            "{'token':'" +
              this.token +
              "','fromRole': 'cs', 'action':'login_req' }"
          );
        }
      }
    },
    btn() {
      this.$router.push({
        path: '/chat/data/',
      })
    },
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
    },
    getMessage: function (msg) {
      let sobj = msg.data;
      let objs = "";
      if (sobj) {
        objs = JSON.parse(sobj);
      }
      console.log(sobj,'shouye77777777777777777777777777');
      if (objs.action == "send_msg_resp") {
        //发送消息返回
        if (objs.result) {
          this.size = 0
          let datas = { uid: this.ID, number: this.number, size: this.size };
          getHistoryLimit(datas).then((response) => {
            this.taleList = response.data;
            this.getUserData()
          });
        } else {
          this.$message.error("发送失败！");
        }
      } else if (objs.action == "receive_msg_notify") {
        // 接收消息返回
        getUser().then((response) => {
          this.winBarConfig.list = response.data.list;
        });
        this.size = 0
        let datas = { uid: this.ID, number: this.number, size: this.size };
        getHistoryLimit(datas).then((response) => {
          this.taleList = response.data;
        });
      } else if (objs.action == "login_resp") {
        // 登录返回
      }
    },
    send: function () {
      this.socket.send(params);
    },
    close: function () {
      console.log("socket已经关闭");
    },
  },
};
</script>
<style>
</style>
